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Latest addition: Jun 9, 2005, 01:16: 


Latest Entry 


London, baby! 

By faruk Ates on Jun 9, 2005, 01:16 + 1 comment 
The time has finally come: @media 2005! As I write this, I'm 
sitting in Rotterdam Airport, waiting for my piane to allow boarding. 
I've got a lovely view of the airport area - or at least, as lovely as 
such a thing can be - and I'm excited! A brief report on pre-@media 
events. 


Now, who wouldn't be excited when they're going on their first ever business trip, 
about to meet several of the biggest names in their field of expertise and, last but not 
least, on their way to two days of web standards, accessibility and bloggers, bloggers 

and more bloggers? My point exactiy. 


Before going Into any details, I must say I'm saddened that some people will be 
absent. John Oxton and Robert Nyman, you will both be missed at this event. 

John had to decide between saving his business and @media, and Robert only got the 
go-ahead from his boss when @media was already sold out. Sometimes life's just not 
fair, eh? 


But the absence of some should not spoil the fun of others, or something like that. 
There will be sessions by none other than Douglas Bowman and Molly E. Holzschlaa 


http://www.kurafire.net/ 
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Peter-Paul Koch 


[quirs mode] Start > QuirksMode Homepage E4 Show links once in breadcrumbs 


Hell Is other browsers 
+ Sartre 
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JAVASCRIPT 


VIEWPORT blogs. If you want to 


th the table of contents 


QuirksBlog Latest bug reports 


ODDS AND ENDS 


Gone to London; site closed 


1 Sunday 


ely closed 


Hope to see some « 
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London calling 


I'm off to London for a few days to attend the 
@media 2005 conference. Fm really looking 
forward to seeing, listening to, and meeting 
some of the people who have taught me much of 
what I know. Fil try not to ask for autographs, I 
promise. 


And I'm nervous as hell. Not about flying. Not so much about meeting a lot of 


people I don't know (though it almos me of them), It's 


feels like I do know 


mostly t having to speak English to native English speakers 


Continue reading Comments (18) 


Safari Wishlist 


Safari is an excellent web browser and my current favourite. However there's 
always room for improvement, and | thought I'd mention some areas where | 
think Safari needs a bit of attention. Some are missing features, others are 
bugs. 


After posting my Wishlist for 1E7 | think it’s only fair to also talk about the 
shortcomings of a really good browser 


ybe it will help Apple keep Safari at the 


ry top of the bro 


er pack? 


Continue reading Comments (33) 


Serer maintenance 


Search this site 
( Go 


Best of 456 Berea Street 


Basics of search engine optimisation 


lake search engines love your site 


Bring on the tables 
Using HTML tables the right way 


CSS tips and tricks, Part 1, Part 2 


My favourite time and trouble savers. 


Developing with web standards 


Recommendations and best practices 


Efficient CSS with shorthand properties 


Save space in your CSS files 


Styling form controls 


CSS applied to form controls 


The alt and title attributes 


Explaining the difference 


The perils of using XHTML properly 
Proble 


ns you May run Into 


More Best of articles 


Treats for your ears 


http://www.456bereastreet.com/ 


CSS is NOT a magic bullet 


Types of tools 
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Golden Mean process 


span intro 
9 3 pageHeader 
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blogger redesign 


behind the scenes 


BLOGGER 


PUSH-BUTTON PUBLISHING FOR THE PEOPLE 


CREATE YOUR OWN BLOG! 


Learn more 


LT Om Start Now! | SIGN IN 


If you have a Blogger 


account, please sign in. 
FRESH BLOGS 
The 10 most recently published blogs: WH AT'S UP username 


11:50 AM J-Fly 


woman under 
construction 


welkom in mijn Quiz 


g mom but 


er on Iv 


password 


Il Remember me [?] 


feelingsinister.org 
Anna's Weblog 
One Blog to Many 


Forgot your password? 


Mis cimientos en los 
cuen... 


All Eyez On Me 
O blog do Caldas 
R@iNbOw~~85 


BLOGS OF NOTE 


Feel like browsing? Here are some 
blogs we've noticed recently. 


35.04  handnews shindig at Club De 
15.4.04 Life at TJ's Place 104] 
14.404 Sabernomics 
12.4.04 Open Access News Mess with Texas 
10.4.04  AfricaPundit ì 
5.4.04 Library Stuff 

5.4.04 Slowpoke Blog 
2.4.04 Burned By The Sun 
11.304 Palm Addict 


“ana A de ii 


The refined logo 


Logotype 


Blogger 


NEW: Info Bold 


Already have a Blogger account? Sign in: 
BLOGGER nr 
password: 
Push-Button Publishing 


remember me: 4 | signin | 


TAKE A QUICK TOUR 


asy Steps: 


Publish ideas Share y Connect wit! 
nd thoughts I ther people 
the word Blog new 1? Let i titr r 
rough the « erent ways you can use Blogger to create you ery owr 
Blog! Star CREATE YOUR BLOG nv... 


Home At t t ord? Copyright © 2000-2003 


: B 0 G G F R Already have a Blogger account? Sign in: 


Push-Button Publishing signin 


Create a blog 
in 3 easy steps: 
© Create an account. 


ED Name your blog. 


© Choose a template. 
Is the word blog new to you? Let us explain what it means, and walk you 


through the different ways you can use Blogger to create your very own 
Blog! Start the Tour! CREATE YOUR BLOG NOW 


Home About Help Store Forgot your password? Copyright © 2000-2003 Pyra Labs 


thoughts 


Publish Share Post Connect 


your thoughts your photos anywhere with people 


building blocks 


template basics 


Phase 8: CSS 
M 2 


Descendants make the change 


DI 


Descendant selectors 


* Define rules for default case 
enmain!...} 
* Create rules that override the default 


e „exception #main { . . . + 


* Add that class/id to the body 


* <body class="exception"> 


Column naming conventions 


M= main P = primary 

X = extra S = secondary 
MX = main| extra 

XM = extra|main 

PS = primary] secondary 


SP = secondary | primary 


Core templates 


es 


#main { 
float: left; 
width: 100%; 
} 

#extra { 
display: none; 


M } 
(default) 


Core templates 


E ody classe" 


.mx #main { 


MAIN XTRA float: left; 
-M- BYE width: 490px; 
3 


.mx #extra { 
float: right; 
MX width: 200px; 
display: block; 
} 


Further division 


E gody class="m-sp"> 


.m-sp #primary { 


SEC PRIMARY float: right; 
S -|P= } 
.m-sp #secondary { 
Fleeces Lee: 


margin-right: 20px; 


M-SP } 


Changing color schemes 


<body class="cs1"> 


<body class="cs2"> 


Add a second (color) style sheet 


= s= index.html & default.css 


color.css 
(only contains color information) 


s= default.css & color.css 
= (combined makes color scheme) 


sweating the details 


a mother’s work is never done 


T-design 


ine e 


Header: border offsets 


on 
#header2 


Header: border offsets 


#header2 { 
position: 


relative; 
15 n° . 
top: 4px; 


Already have 2.1 account? Sign in: 


SIGN IN ) m ? 


What Create a blog in 
3 easy steps: 
© Create an account 

© Name your blog 


O Choose a template 


Post 


your thoughts your photos anywhere Ww) 


Is the word Nlog new to you? Let us explain the blog concept and 


the many way&Xyou can use Blogger to do all of t things above! 


CREATE YOUR BLOG NOW 


Audioblogging Travgfing during the holidays? Blo@Xrom the road with 

AudioBlogger. It's ad easy as leaving a voicemail and ft shows up in your 

blog. There's a free ial. Let's hear it. 
€ 3 More news 


Home | About | Help | Store | Copyright © 2000-2003 Google 


Repositioning content 


What’s a blog? 
> 


Publish your thoughts 


Share vour photos 
Post anywhere 


Connect with people 


Is the word blog new to you? Let us explain the blog concept and 
the many ways you can use Blogger to do all of the things above! 


#primary { 
position: relative; 
} 

#btn-tour { 
position: absolute; 
top: 6px; 
right: 10px; 
width: 145px; 
height: 28px; 
} 


Setting up the list 


#primary li { 
float: left; 
width: 98px; 
text-align: center; 


Setting up the list 


mama 


#primary li a { 
display: block; 
width: 86px; 
height: 2.5em; 
padding: 6px 6px; 
text-decoration: none; 
color: #666; 
} 


& Blogger 


Featured Blogs 


one to many 

Ma quande lingues coalesce, li 
grammatica del resultant 
lingue es plu simplic e regulari 
quam ti del coalescent lingues. 


LS 
= 
= 

Musings of a Catholic Convert 


Ma quande lingues coalesce, li 
grammatica del resultant. 


View more featured blogs. 


A [BJ @ 8 a Oo 


A 


Publish your thoughts 


A blog is a web page made up of 
usually short, frequently updated 
posts that are arranged 
chronologically—like a what's 
new page or a journal. The 
content and purposes of blogs 
varies greatly—from links and 
commentary about other web 
sites, to news about a 
company/person/idea, to 
diaries, photos, poetry, mini-essays, project updates, even 
fiction. 


Blog posts are like instant messages to the web. 


Many blogs are personal, “what's on my mind” type musings. 
Others are collaborative efforts based on a specific topic or area 
of mutual interest. Some blogs are for play. Some are for work. 
Some are both. 


CD 
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line-height: 


1.2em 


around a corner 


and throush a door 


Rounded-corner boxes 


What’s a blog? Create a blog 
in 3 easy steps: 


24 CS N Q @ Create an account 


Publish Share Post Connect © Name your blog 
your thoughts your photos anywhere with people 
© Choose a template 
Is the word blog new to you? We can explain and walk you through the 


different ways you can use Blogger to create your very own blog! 
CREATE YOUR BLOG NOW 


Featured Blogs Featured Blogs 
| 
== 
_ 
Musings of a Catholic Convert one to many 
Ma quande lingues coalesce, li Ma quande lingues coalesce, li 
grammatica del resultant. grammatica del resultant lingue. 


View more featured blogs » View more featured blogs » 


Sliding Doors 


DESCRIPTION: 


Use oftwo background 
«Bg: images which “slide” 
together or apart 
Illusion of ONE image that expands 
and contracts with text size 
example 1: original 


example 2: angular 
example 3: deco 


Sliding doors explained 


I. WISIBLE 
TabText Doorway 


#— LEFT RIGHT 
IHG IHG 


When text grows, doorway expands, 
images slide apart, more of each image revealed 


Sliding doors turned sideways 


Module styling 


ogger News .mod { 
17 Dec 2003 If “Yes” is background: urlC" 6 ./img/bg_mod_bot 5 Gita 


selected, your blog may appear no- repeat left bottom : 
in the Blogger directory and 


recently updated list. If you'd paddi ng-bottom : 6px; 
rather keep your blog private, } 
select “No.” Note: Private does 


not mean the page will actually .mod2 { 
be protected on your server -- 
that's up to you. 


background: url("../img/bg_mod_top.gif") 


12 Dec 2003 Each time you no-repeat left top; 


publish your blog, it will be paddi ng-top : 6px; 
automatically FTP’d to your 

eb server. Enter your FTP } 
server information here. For 
example: “ftp.yoursite.com”. If .mod3 i 


ou do not have a web site with border: solid #E 1D4C0; 
FTP access, go. border-width: 0 2px; 
padding: 2px 10px; 
} 


News archives » 


remote rollovers 


check these out 


Remote rollovers 


DESCRIPTION: 
Control rollover state of 
one element remotely with 
another element 


Photos from a 3-day whirlwind trip with Laura 
Kirkwood and Lane Becker from Adaptive Path to 
meet with a potential client based in Hong Kong. We 
arrived a couple days early to allow adjusting to the 


time change, so we had time to explore quite a bit 
of the city. 


Updated: December 2004 


(112 photos) ss 


dbowman.com/photos 


How single-image rollovers work 


manupulate revealed portion 
with background position 


a:hover { 
background-position: -160px 0; 


} 


stopdesign.com/present/eg/ap/lane.html 


How remote rollovers work 


: MILLI Can change on hover III LL ; 


<a href="link"><em> ane Becke 4</em></a> 


i Can change on hover --é 


» Lane Becker 


stopdesign.com/present/eg/ap 


help! 


when things go very very wrong 


Troubleshooting CSS 


ackground-image: pattern.g 


ont: 150% bold Trebuchet 
olor: 660000; 


Code error Browser bug 


* Validate 
* Don’t start with IE 


Other possibilities 


* Box model values 
* Validate HTML 
* Inheritance issue 


* Cascade 


* Turn to the community 


Layout problems (floats) 


If it's not floated, 
FLOAT IT. 


If it's floated, 
UN-FLOAT IT. 


How? vs Why? 


X 


